<template>
<div class="userAddEditOriginClass">
  <Form :model="formData" label-position="top" inline ref="formRef" :rules="ruleValidate">
    <FormItem label="姓名:" prop="name">
      <Input v-model="formData.name" placeholder="请输入姓名" style="width:250px;"/>
    </FormItem>
    <FormItem label="登陆账号:" prop="account">
      <Input v-model="formData.account " placeholder="请输入登陆账号" style="width:250px;"/>
    </FormItem>
    <FormItem label="密码:" prop="password"> 
      <Input v-model="formData.password " type="password" password placeholder="请输入密码" style="width:250px;"/>
    </FormItem>
    <FormItem label="角色分配:">
      <Select v-model="formData.isadmin" style="width:250px;">
          <Option :value="0">普通角色(ordinary)</Option>
          <Option :value="1">管理员角色(admin)</Option>
      </Select>
    </FormItem>
    <FormItem label="年龄:">
      <InputNumber :max="100" :min="0" v-model="formData.age" placeholder="请输入年龄" style="width:250px;"/>
    </FormItem>
    <FormItem label="性别:">
      <Select v-model="formData.gender" style="width:250px;">
          <Option value="男">男</Option>
          <Option value="女">女</Option>
      </Select>
    </FormItem>
  </Form>
  <div class="demo-drawer-footer">
    <Button type="primary" @click="saveUser">提交</Button>
  </div>
</div>
</template>
<script>

import { saveUser } from '@/api/user'
export default {
  components: {
  },
  props: {
    params: {
      type: Object
    }
  },
  data() {
    return {
      ruleValidate: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入登陆账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
  },
  computed: {
    formData(){
      if(this.params.user) {
        return this.params.user
      }else{
        return { gender: '男', isadmin: 0, age: 1 }
      }
    }
  },
  methods: {
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-25 14:41:20
     * @Description: 保存用户信息
     */
    saveUser() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          saveUser(this.formData).then(res => {
            if(res.data.state=='ok') {
              this.$Notice.success({title:'提示', desc: res.data.msg})
              this.$emit('refresh')
            }else {
              this.$Notice.error({title:'提示', desc: res.data.msg})
            }
          })
        } else {
            this.$Notice.error({title:'提示', desc:'请填写必填信息！'})
        }
      })
    },
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-25 14:41:20
     * @Description: 重置表单
     */
    resetFrom() {
      this.$refs.formRef.resetFields()
    }
  },
  mounted() {
  }
}
</script>
<style>
.userAddEditOriginClass .demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
